<template>
  <div>
    <div style="padding-top:10vh;
  font-size: 90px;
  text-align: center;">
      <!-- <a-icon style="size:100px" type="check-circle" /> -->
      <a-icon
        :class="[isbind ? 'success' : 'error' ,'icon']"
        :type="isbind ? 'check-circle' : 'close-circle'"
      />
    </div>

    <div v-if="!isbind">
      <div class="okmessage">充值失败</div>
      <div style="font-size:14px;text-align: center;">失败原因：{{Failurereason}}</div>

      <div class="end-ok">
        <a-button @click="torecharge" type="primary">重新充值</a-button>
        <a-button @click="endok">返回首页</a-button>
        <div style="font-size:14px;text-align: center;">
          <a href="#" style="color:#279e71">查看帮助</a>
        </div>
      </div>
    </div>

    <div v-if="isbind">
      <div class="okmessage" v-if="!rechargeshow">
        恭喜，您已经成功充值了
        <span style="color:#29a576">{{recharge | rechargefilter}}</span> &ensp;元。
      </div>
      <div class="okmessage" v-if="rechargeshow">
        &ensp;你已成功提交充值申请，金额为
        <span style="color:#29a576">{{bankrecharge | rechargefilter}}</span> &ensp;元。
        <br />
        <div class="messagetip">
          <p>我们将在收到款项后1-2个工作日内完成信息核对</p>
          <p>若信息无误，将完成入账，请留意账户余额变动</p>
          <p>若信息有误，款项将会原路退回</p>
        </div>
      </div>

      <div class="end-ok">
        <a-button @click="torecharge" type="primary">继续充值</a-button>
        <a-button @click="endok">返回首页</a-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      recharge: "",
      bankrecharge: "",
      rechargeshow: "false",
      typename: "",
      isbind: false,
      Failurereason: "未知错误"
    };
  },
  filters: {
    rechargefilter(value) {
      return parseFloat(value / 100).toFixed(2);
    }
  },
  created() {
    this.getParams();
  },
  methods: {
    endok() {
      this.$router.push({ path: "/userMain" });
    },
    torecharge() {
      if (this.typename == "perConfirmRecharge") {
        this.$router.push({ path: "/perRecharge" });
      } else if (this.typename == "orgRecharge") {
        this.$router.push({ path: "/orgRecharge" });
      }
    },
    getParams() {
      // 取到路由带过来的参数
      this.recharge = this.$route.params.recharge;
      this.bankrecharge = this.$route.params.bankrecharge;
      this.typename = this.$route.params.typename;
      this.isbind = this.$route.params.isbind;
      this.Failurereason = this.$route.params.Failurereason;


      if (this.recharge == null) {
        this.rechargeshow = "ture";
      } else if (this.bankrecharge == null) {
        this.rechargeshow = false;
      }
    }
  }
};
</script>
<style scoped>
.success {
  color: green;
}
.error {
  color: red;
}

.messagetip {
  font-size: 13px;
  width: 400px;
  padding-top: 10px;
  margin: 0 auto;
}

.okmessage {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px 50px;
  margin: 10px 0;
  font-size: 26px;
}

.end-ok {
  padding-top: 20px;
  margin: 0 auto;
  text-align: center;
}
a {
  text-decoration: none;
}
</style>